<template>
  <view class="form-item">
    <view class="label">{{ label }}</view>
    <slot></slot>
    <view class="tip">{{ errorMessage }}</view>
  </view>
</template>

<script>
import { inject } from "vue";

export default {
  props: {
    label: {
      type: String,
      default: "",
    },
    error: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
    },
  },
  data() {
    return {
      errorMessage: this.error,
    };
  },
  watch: {
    errorObj: {
      handler(newVal) {
        if (this.prop) {
          if (newVal[this.prop]) {
            this.errorMessage = newVal[this.prop];
          } else {
            this.errorMessage = "";
          }
        }
      },
      deep: true,
    },
  },
  created() {
	const message = this.$emit('@provide')
	this.errorObj = message.error || {}
  },
  mounted() {
    if (this.prop) this.$emit('getFormItemProp', this.prop);
  },
};
</script>

<style lang="less" scoped>
	// 行为相关颜色
	@my-color-error:#ff4747;
.form-item {
  margin-bottom: 0.5rem;

  .tip {
    margin: 0.2rem 0;
    font-size: 0.8rem;
    color: @my-color-error;
  }
  .label {
    margin-bottom: 0.2rem;
  }
}
</style>